<template>
	<view>
		<view class="bg_box"></view>
		<u-navbar back-icon-color="#000000" :border-bottom="false" title-color="#000000" title="" :background="background"></u-navbar>
		<view class="top">
			<view class="detail_box" @click="toPage('../luck/detailed')">
				获奖记录
				<image src="../static/g10.png"></image>
			</view>	
			<view class="img_box">
				<view class="go_case" @click="toPage('../luck/rule')">
					<image src="../static/case_bg3.png"></image>
				</view>
				<view class="text_box1">*剩余<text>{{info.cishu}}</text>次抽奖次数</view>
				<view class="button_box">
					 <view class="but_but" @click="showType">
						 <view class="shou"></view>
					 	点此抽奖
					 </view>
				</view>
			</view>	
		</view>
		
		<view class="surprise">
			 <view class="egg_box">
				 <image src="../static/r9.png"  @click="egg_but(1,'金蛋')"></image>
                 <image src="../static/r10.png" @click="egg_but(2,'银蛋')"></image>
				 <image src="../static/r11.png" @click="egg_but(3,'彩蛋')"></image>
			 </view>
		</view>
		
		<view class="top_box">
			  <view class="name">本期达成</view>
			  <view  class="time">{{ time }}</view>
		</view>
		
		<view class="con">
			<view class="box">
				
				<view class="itemshow" v-if="length == 0">
					<view class="itemshow_box" style="height:450rpx;">
						<image src="../static/null.png"></image>
					</view>
				</view>
				<view v-else class="item">

					<view class="item_row" v-for="(item,index) in info.list" :key="index">
						<image class="portrait" :src="getHead(item.head_iamge)"></image>
						<view class="complete_box" v-if="item.buy_status == 1 && item.text1 == 100 && item.text2 == 100">
							<image src="../static/complete_bg.png"></image>
						</view>
						<view class="content">
							<view class="item1">{{item.username}}</view>
							<view class="item2">
								<view class="item2_a">好友人数<text class="color1">{{ item.children }}</text><text class="color3">/</text><text
									 class="color2">{{ item.active_children }}</text></view>
								<image v-if="item.text1==100" class="sign" src="../static/sign1.png"></image>
								<image v-if="item.text1 < 100" class="sign" src="../static/sign2.png"></image>
							</view>
							<view class="line">
								<view class="line_item1" :style="'width:'+item.text1+'%'"></view>
							</view>
							<view class="item2">
								<view class="item2_a">经验值<text class="color1">{{item.jingyan }}</text><text class="color3">/</text><text class="color2">{{ item.active_jingyan }}</text></view>

								<view v-if="item.buy_status == 1" style="display: flex;align-items: center;">
									<text v-if="item.text2==100" style="margin-right:10rpx;color:#FFA800;font-size:24rpx;">已抢拍</text>
									<image class="sign" v-if="item.text2==100" src="../static/sign1.png"></image>
								</view>
								<view v-if="item.buy_status == 0" style="display: flex;align-items: center;">
									<text v-if="item.text2 == 100" style="margin-right:10rpx;color:#666666;font-size:24rpx;">未抢拍</text>
									<image class="sign" v-if="item.text2 == 100" src="../static/sign1.png"></image>
									<image class="sign" v-if="item.text2 < 100" src="../static/sign2.png"></image>
								</view>

							</view>
							<view class="line">
								<view class="line_item2" :style="'width:'+item.text2+'%'"></view>
							</view>
						</view>
					</view>

					<view class="div"></view>
				</view>
			</view>
		</view>
		
		<view class="bottom" @click="toPage('/pages/htmlC/invitation/poster')">
			 <image class="image1" src="../static/tb3.png"></image>
			 <view class="text">
				  <text class="text1">邀请好友参加可获取</text><text class="text2">28到888大奖</text>
			 </view>	
			 <image class="image2" src="../static/tb2.png"></image>
		</view>
		
		
		<!--  选择抽奖扭蛋类型-->
		<u-popup v-model="show" close-icon-pos="top-left" background="transparent" :closeable="true"  borderRadius="10" mode="bottom">
			<view class="popupType">
				<view class="title">选择扭蛋类型</view>
				<view class="con_text">扭蛋分为三种，不同扭蛋奖品不同</view>
				<view class="type">
                    <!-- <view v-if="info.reward_number != 0 || info.reward_number != '0.00'" class="list" :class='[type==1 ? "active" : ""]'>
						<image @click="type=1" src="../static/r9.png" class="shang"></image>
					</view>
					<view class="list" :class='[type==2 ? "active" : ""]'>
						<image @click="type=2" src="../static/r10.png" class="shang"></image>
					</view>
					<view v-if="info.range_reward_number != 0 || info.range_reward_number !=  '0.00'" class="list" :class='[type==3 ? "active" : ""]'>
						<image @click="type=3" src="../static/r11.png" class="shang"></image>
					</view> -->
					<view class="list" :class='[type==1 ? "active" : ""]'>
						<image @click="type=1" src="../static/r9.png" class="shang"></image>
					</view>
					<view class="list" :class='[type==2 ? "active" : ""]'>
						<image @click="type=2" src="../static/r10.png" class="shang"></image>
					</view>
					<view  class="list" :class='[type==3 ? "active" : ""]'>
						<image @click="type=3" src="../static/r11.png" class="shang"></image>
					</view>
				</view>
				<view class="button">
					<button type="default" @click="risk_but()">确认选择</button>
				</view>
			</view>
		</u-popup>
		
		<!-- 	扭蛋中奖-->
		<u-popup v-model="show1" close-icon-pos="top-left" background="transparent" :closeable="true" borderRadius="10" mode="bottom">
			<view class="popup">
				<view class="live_box">
					<view class="title">恭喜您</view>
					<view class="img_box">
						<image src="../static/mtk_bg5.png"></image>
						<image v-if="extractGashapon.type=='GDB'" class="img" src="../static/mtk_bg3.png"></image>
						<image v-if="extractGashapon.type=='KMB'" class="img" src="../static/mtk_bg2.png"></image>
						<image v-if="extractGashapon.type=='CASH'" class="img" src="../static/r9.png"></image>
						<image v-if="extractGashapon.type=='RANGE_CASH'" class="img" src="../static/r11.png"></image>
					</view>
					<view class="title_text">您的扭蛋奖品是</view>
					<view class="text">
						 <text class="text_color" v-if="extractGashapon.type=='GDB'">金蜜</text>
						 <text class="text_color" v-if="extractGashapon.type=='KMB'">蜜贝</text>
						 <text class="text_color" v-if="extractGashapon.type=='CASH'">金蛋</text>
						 <text class="text_color" v-if="extractGashapon.type=='RANGE_CASH'">彩蛋</text>
					     <!-- {{extractGashapon.type=='GDB'?'金蜜':extractGashapon.type=='KMB'?'蜜贝':'现金'}} -->
					     <text>{{extractGashapon.number}}</text>{{extractGashapon.type=='CASH'?'蜜贝':'个'}}
					</view>
					<view class="live_but">
						<view class="but" @click="close_but()">
							开心收下
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		
	<!-- 	显示扭蛋规则 -->
		<u-popup v-model="show2" close-icon-pos="top-left" background="transparent" :closeable="true" borderRadius="10" mode="bottom">
			<view class="popup">
				<view class="egg_popup_box">
					<view class="title">{{ show2_title }}奖池</view>
					<view class="img_box">
						<image v-if="show2_type==1" class="img" src="../static/r12.png"></image>
						<image v-if="show2_type==2" class="img" src="../static/r13.png"></image>
						<image v-if="show2_type==3" class="img" src="../static/r14.png"></image>
					</view>
					<view class="title_text">{{ show2_title }}奖池是</view>
					<view class="egg_number" v-if="show2_type==1">
						{{ info.reward_number }}<text class="text1">蜜贝</text>
					</view>
					<view class="egg_number" v-if="show2_type==2">
						<text v-for="(item,index) in info.gdb_reward_list">
							{{ item.price }} 
							<text v-if="info.gdb_reward_list.length-1 != index">/</text> 
						</text>
						<text class="text1">金蜜</text>
						<!-- <view class="text2">或</view>
							<text v-for="(item,index) in info.kmb_reward_list" >
							  {{ item.price }}
							  <text v-if="info.kmb_reward_list.length-1 != index">/</text> 
							</text>
							<text class="text1">蜜贝</text> -->
					</view>
					<view class="egg_number" v-if="show2_type==3">
						{{ info.range_reward_number }}<text class="text1">蜜贝</text>
					</view>
					<view class="live_but">
						<view class="but" @click="close_but1()">
							扭一下
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		
		
		<!--  是否上传收款 -->
		<u-popup v-model="show3" close-icon-pos="top-left" background="transparent" :closeable="true"  borderRadius="10" mode="bottom">
			<view class="popupType">
				<view class="title">提示</view>
				<view class="con_text">您未上传银行卡相关信息，请上传信息之后再来抽取奖励</view>
				
				<view class="button">
					<button type="default" @click="go_url()">确认前往</button>
				</view>
			</view>
		</u-popup>
		
		<!--  风险提示 -->
		<u-popup v-model="show4" close-icon-pos="top-left" background="transparent" :closeable="true"  borderRadius="10" mode="bottom">
			<view class="popupType">
				<view class="title">风险提示</view>
				<view  style="line-height:50rpx;margin-top:60rpx;">
					<view style="text-align: center;"> 
					  <image src="../static/tan.png" style="width:45px;height: 45px;"></image>
					</view>
					<view >
						<view style="text-align: center;">银蛋、彩蛋共享扭蛋次数</view>
						<view style="text-align: center;">本次操作将消耗您<text style="color:#FB683D;">扭蛋次数</text></view>
					</view>
				</view>
				
				<view class="button">
					<button type="default" @click="getResult()">确认抽奖</button>
				</view>
			</view>
		</u-popup>
		
	</view>
</template>

<script>
	var than;
	export default {
		data() {
			return {
				background: {
					'background': 'transparent'
				},
				show: false,
				show1: false,
				info: {},
				extractGashapon: {},
				time: '',
				length: '',
				type:2,
				number: '',
				show2: false,
				show2_type:1,
				show2_title:'',
				show3:false,
				show4:false,
				
			}
		},
		onLoad(option) {
			//CASH:现金
			than = this;
			than.newMemberList();
		},
		onReady: function(e) {

		},
		onReachBottom() {

		},
		methods: {
			newMemberList() {
				than.post("api/gashapon/newMemberList", null, function(data) {
					for (let i in data.list) {
						var a = data.list[i];
						if (a.jingyan >= a.active_jingyan) {
							a.text2 = 100;
						} else {
							a.text2 = a.jingyan / a.active_jingyan * 100;
						}
						if (a.children >= a.active_children) {
							a.text1 = 100;
						} else {
							a.text1 = a.children / a.active_children * 100;
						}
					}
					//console.log(data)
					than.number = data.reward_number.substring(0, data.reward_number.length)
					than.info = data;
					//console.log(than.info)
					than.length = than.info.list.length
					than.time = than.info.begin.replace(/-/g, '.') + "-" + than.info.end.replace(/-/g, '.')
				})
			},
			showType() {
				// if (than.info.reward_number == 0 || than.info.reward_number == '0.00' && than.info.range_reward_number == 0 || than.info.range_reward_number == '0.00') {
				// 	than.type = 2;
				// 	than.getResult();
				// }else {
				// 	than.show = true	
				// }
				//than.show = true	
				if(than.info.bank_status == 0){
					than.show3 = true
				}else{
					than.show = true
				}
			},
			risk_but(){
				than.show = false	
				
				if(than.type == 1){
					than.getResult()
				}else{
					than.show4 = true	
				}
				
			},
			// go_but() {
			// 	this.$u.debounce(this.getResult);
			// },
			getResult() {
				
			 //    if(than.type != 2){
				// 	 if(than.info.bank_status == 0){
				// 		 than.show4 = false
				// 		 than.show3 = true
				// 	  }else{
				// 		  than.getResult_fun()
				// 	  }
				// }else{
				// 	than.getResult_fun()
				// }
				
			
				 // if(than.info.bank_status == 0){
					//  than.show4 = false
					//  than.show3 = true
				 // }else{
					//   than.getResult_fun()
				 // }
				 
				 than.getResult_fun()
				
				
			},
			getResult_fun(){
				than.show4 = false
				than.post("api/gashapon/extractGashapon", {
					shake_type: than.type
				}, function(data) {
					than.extractGashapon = data;
					than.info.cishu = than.sub(than.info.cishu, 1)
					than.show1 = true
					than.newMemberList();
					console.log(than.extractGashapon)
				})
			},
			go_url(){
				than.toPage('/pages/htmlA/setting/bank')
			},
			close_but() {
				than.show1 = false
			},
			egg_but(num,title){
				than.show2 = true
				than.show2_type = num
				than.show2_title = title
				than.type = num
			},
			close_but1(){
				 than.show2 = false
				 //than.show4 = true
					 
				 if(than.info.bank_status == 0){
					than.show3 = true
				 }else{
					if(than.type == 1){
						than.getResult()
					}else{
						than.show4 = true
					}
				 }
				 
				 
				 
				 
				 
				// than.show2 = false
			}
		}
	}
</script>

<style lang="less">
	// .div {
	// 	height: 100rpx;
	// }
	.surprise {
		width: 679rpx;
		height: 120rpx;
		background-image: url(../static/r8.png);
		background-size: 100% 100%;
		margin: auto;
		position: relative;
		z-index: 100;
		display: flex;
		align-items: center;
		margin-top:80rpx;
	
		.egg_box{
			display: flex;
			width:330rpx;
			justify-content: space-around;
			margin-left:330rpx;
			image{
				width:61rpx;
				height:73rpx;
			}
		}

	}

	.popupType {
		// background-image: url(../static/r2.png);
		// background-size: 100% 100%;
		// width: 523rpx;
		// height: 583rpx;
		width: 100%;
		background: white;
         
		.title {
			font-size: 38rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
			text-shadow: 0px 5rpx 3rpx rgba(193, 133, 68, 0.12);
			height: 97rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-bottom: 1px solid #F6F6F6;
		}

		.con_text{
			text-align: center;		
			font-size: 28rpx;
			height: 100rpx;
			line-height: 100rpx;
			font-weight: 500;
			color: #666666;
			margin-top:30rpx;
		}

		.type {
			display: flex;
			align-items: center;
			justify-content: center;
			padding:0rpx 30rpx;
			justify-content: space-around;
            .list:first-child{
				margin-left:0rpx;
			}
			.list {
				// width: 45%;
				width:184rpx;
				height:228rpx;
				text-align: center;
                background-color: #F9F9F9;
				// margin-left:100rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius:20rpx;
				.shang {
					width: 111rpx;
					height: 135rpx;
					position: relative;
					z-index: 10;
				}

			}
			.active{
				
				background: #FDF4ED;
				border: 1px solid #FB683D;
				border-radius: 20rpx;
			}
		}

		.button {
			height: 124rpx;
			display: flex;
			align-items: center;
			margin-top: 50rpx;

			button {
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color:white;
				line-height: 74rpx;
				width: 245rpx;
				height: 74rpx;
				background: #FB683D;
				border-radius: 20rpx;
			}
		}
	}

	.bg_box {	
        background: linear-gradient(0deg, #FFFFFF, #EEF7FE);
		position: fixed;
		width: 100%;
		top: 0;
		z-index: 1;
		bottom: 0;
	}

	.top {
		position: relative;
		width: 100%;

		/* #ifdef APP-PLUS */
		top: 0rpx;
		/* #endif */
		/* #ifdef H5 */
		top: 0rpx;
		/* #endif */
		z-index: 1;
		
		.detail_box{	
			display: flex;
			align-items:center;
			font-size: 28rpx;
			font-weight: 500;
			color: #333333;
			line-height: 46rpx;
			text-align:right;
			justify-content: flex-end;
			padding-right:20rpx;
			image{
				width: 28rpx;
				height: 28rpx;
				margin-left:10rpx;
			}
		}
		.img_box{
			width: 100%;
			height:538rpx;
			background-image:url(../static/bg1.png);
			background-size: 100% 100%;
			position: relative;
			.go_case {
				position: absolute;
				right: 0rpx;
				z-index: 3;
				top: 150rpx;
			
				image {
					width: 52rpx;
					height: 168rpx;
				}
			}
			.text_box1{
				position: absolute;
				top:440rpx;
				text-align: center;
				left: 0;
				right: 0;
                font-size: 25rpx;
				font-weight:bold;				
                color: #333333;
				text{
					text-decoration:underline;
					color:#0EC990;
				}
			}
			.button_box{
				position: absolute;
				top:490rpx;
				left: 0;
				right: 0;
				.but_but{
					width: 245rpx;
					height: 74rpx;
					background: #3476FE;
					border-radius: 20rpx;
					line-height: 74rpx;
					text-align: center;
					color:white;
					margin: auto;
					position:relative;
					.shou{
						position: absolute;
						height:60rpx;
						width: 70rpx;
						top: 25rpx;
						right: -35rpx;
						background-image: url(../static/shou.png);
						background-size: 100% 100%;
					}
				}
			}
		}

		

	}
	
	.top_box{
		display: flex;
		position: relative;
		z-index: 2;
		padding:0rpx 40rpx;
		margin: 30rpx 0rpx;
		.name{			
			font-size: 36rpx;
			font-weight: bold;
			color: #333333;
		}
		.time{
			height: 50rpx;
			background: #E9EDFF;
			border-radius: 10rpx;
			line-height: 50rpx;
			font-size: 24rpx;
			font-weight: bold;
			color: #3476FE;
			padding:0rpx 10rpx;
			margin-left:20rpx;
		}
	}

	.con {
		padding: 30rpx;

		/* #ifdef APP-PLUS */
		margin-top: -20rpx;
		/* #endif */
		/* #ifdef H5 */
		margin-top: -20rpx;
		/* #endif */
		.box {
			position: relative;
			border-radius: 20rpx;
			z-index: 2;		
			background: #FBF7F3;

			.itemshow {
				height: 100%;
				padding: 0rpx;
				padding-top: 0rpx;

				.itemshow_box {
					display: flex;
					align-items: center;
					justify-content: center;

					image {
						margin-top: -100rpx;
						width: 383rpx;
						height: 195rpx;
					}
				}
			}

			.item {
				margin-bottom:150rpx;
				min-height:450rpx;
				height: 100%;
				padding: 50rpx 30rpx;

				.item_row {
					display: flex;
					position: relative;

					.complete_box {
						width: 70rpx;
						height: 70rpx;
						position: absolute;
						right: 30rpx;
						top: 30rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.portrait {
						width: 88rpx;
						height: 88rpx;
						border-radius: 50%;
					}

					.content {
						flex: 1;
						margin-left: 15rpx;
					}

					.item1 {
						font-size: 36rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #333333;
					}

					.item2 {
						display: flex;
						align-items: center;
						margin-top: 30rpx;
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #333333;

						.icon {
							width: 31rpx;
							height: 31rpx;
							margin-right: 10rpx;
						}

						.item2_a {
							flex: 1;
							display: flex;
							align-items: center;

							.color1 {
								font-size: 32rpx;
								font-family: DIN Medium;
								font-weight: bold;
								color: #FF2E01;
								margin-left: 5rpx;
							}

							.color2 {
								font-size: 32rpx;
								font-family: DIN Medium;
								font-weight: bold;
								color: #805100;
							}

							.color3 {
								font-size: 28rpx;
								color: #805100;
							}
						}

						.sign {
							width: 27rpx;
							height: 27rpx;
						}

					}

					.line {
						height: 23rpx;
						border-radius: 50rpx;
						width: 100%;
						background: white;
						margin-top: 10rpx;
					}

					.line_item1 {
						background: #FE4D21;
						height: 100%;
						width: 80%;
						border-radius: 50rpx;
					}
					.line_item2 {
						background: #3476FE;
						height: 100%;
						width: 80%;
						border-radius: 50rpx;
					}


				}
			}
		}

	}

	.bottom {
		position: fixed;
		z-index: 3;
		left: 0;
		right: 0;
		// #ifdef H5
		bottom: 0rpx;
		// #endif
		// #ifdef APP-PLUS
		bottom: 0rpx;
		// #endif
		// width: 678rpx;
		// margin: auto;
		height: 120rpx;
		display: flex;
		align-items: center;	
		background-color: white;
		padding:0rpx 40rpx;
         .image1{
			 width: 68rpx;
			 height: 68rpx;
		 }
		 .image2{
		 	 width: 88rpx;
			 height: 88rpx;
		 }
		 .text{
			 flex:1;
			 margin-left:35rpx;
			 .text1{
			 	color:#333333;	 			
			 			font-weight: bold;
			 }
			 .text2{
			 	color:#FF2D01;	
			 			font-weight: bold;
			 }
		 }
		
	}

	.popup {
		.live_box {
			width: 750rpx;
            background-color: white;
			.title {
				font-size: 38rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
				text-shadow: 0px 5rpx 3rpx rgba(193, 133, 68, 0.12);
				height: 97rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-bottom: 1px solid #F6F6F6;
			}
			.img_box {
				position: relative;
				width: 100%;
                text-align: center;
				image {
					width: 485rpx;
					height: 368rpx;
				}

				.img {
					width: 110rpx;
					height: 110rpx;
					position: absolute;
					top: -70rpx;
					left: 0;
					right: 0;
					bottom: 0;
					margin: auto;
				}
			}

			.text {
				text-align: center;
				font-size: 60rpx;
				color: #FB683D;
				font-weight: bold;
                margin-top:20rpx;
				.text_color{
					color: #FB683D;
				}
				text {
					color: red;
					padding: 0rpx 10rpx;
				}
			}
			.title_text{	
				text-align: center;
				font-size: 28rpx;
				font-weight: 500;
				color: #666666;
				margin-top:20rpx;
			}

			.live_but {
				margin-top: 30rpx;
                padding-bottom:60rpx;
				.but {
					line-height: 80rpx;
					text-align: center;
					font-size: 30rpx;
					font-weight: 500;
					color: #FFFFFF;
					margin: auto;
					width: 245rpx;
					height: 80rpx;
					background: #FB683D;
					border-radius: 20rpx;
				}
			}
		}
		.egg_popup_box{
			width: 750rpx;
			background-color: white;
			.title {
				font-size: 38rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
				text-shadow: 0px 5rpx 3rpx rgba(193, 133, 68, 0.12);
				height: 97rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-bottom: 1px solid #F6F6F6;
			}
			.img_box {
				position: relative;
				width: 100%;
			    text-align: center;
				// width: 485rpx;
				// height: 368rpx;		
				.img {
					width: 426rpx;
					height: 389rpx;
				}
			}
			
			.text {
				text-align: center;
				font-size: 28rpx;
				color: #666666;
				font-weight: bold;
			    margin-top:20rpx;
			}
			.egg_number{
				color:#FB683D;
				font-size:36rpx;
				text-align: center;
				margin-top:10rpx;
				.text1{
					font-size:28rpx;
					font-weight: bold;
					margin-left:8rpx;
				}
				.text2{
					color:#333333;
					font-weight: bold;
					font-size:28rpx;
				}
			
			}
			.title_text{	
				text-align: center;
				font-size: 28rpx;
				font-weight: 500;
				color: #666666;
				margin-top:20rpx;
			}
			
			.live_but {
				margin-top: 30rpx;
			    padding-bottom:60rpx;
				.but {
					line-height: 80rpx;
					text-align: center;
					font-size: 30rpx;
					font-weight: 500;
					color: #FFFFFF;
					margin: auto;
					width: 245rpx;
					height: 80rpx;
					background: #FB683D;
					border-radius: 20rpx;
				}
			}
		}
	}
</style>
